<template>
  <div class="role">
    <div class="title">选择身份</div>
    <div class="cont">
      <!-- <router-link to="/number?role=first">初试导演</router-link>
      <router-link to="/host">主持人</router-link>
      <router-link to="/number?role=second">复试导演</router-link>
      <router-link to="/number?role=photographer">拍摄者</router-link> -->
      <a @click="navigator('first')">初试导演</a>
      <a @click="navigator('host')">主持人</a>
      <a @click="navigator('second')">复试导演</a>
      <a @click="navigator('photographer')">拍摄者</a>
    </div>
  </div>
</template>
<script setup>
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();

const navigator = (role) => {
  if (role == "host") {
    router.push({
      path: "/host",
      query: {
        role: role,
        cid: route.query.cid,
      },
    });
  } else {
    router.push({
      path: "/number",
      query: {
        role: role,
        cid: route.query.cid,
      },
    });
  }
};
</script>